<!doctype html>




<html class="theme-next pisces" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
    
  
  <link href="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.lug.ustc.edu.cn/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//cdn.staticfile.org/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Web,html,css," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="html 的其他属性除非在 html 元素中添加 dir 属性并将属性值设为 rtl ，否则内容的基准方向都默认为从左至右。
span 和 divspan 只适合包围字词或短语内容，而 div 适合包含块级内容。由于 span 没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时才使用它。
bdobdo ( bidirectional override ，双向重载):用于显式地格式化其">
<meta property="og:type" content="article">
<meta property="og:title" content="《 HTML5 与 CSS3 基础教程》备忘2">
<meta property="og:url" content="http://codingme.xyz/2016/08/29/html-css-diary-2/index.html">
<meta property="og:site_name" content="CodingMe">
<meta property="og:description" content="html 的其他属性除非在 html 元素中添加 dir 属性并将属性值设为 rtl ，否则内容的基准方向都默认为从左至右。
span 和 divspan 只适合包围字词或短语内容，而 div 适合包含块级内容。由于 span 没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时才使用它。
bdobdo ( bidirectional override ，双向重载):用于显式地格式化其">
<meta property="og:updated_time" content="2016-10-15T10:23:23.398Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="《 HTML5 与 CSS3 基础教程》备忘2">
<meta name="twitter:description" content="html 的其他属性除非在 html 元素中添加 dir 属性并将属性值设为 rtl ，否则内容的基准方向都默认为从左至右。
span 和 divspan 只适合包围字词或短语内容，而 div 适合包含块级内容。由于 span 没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时才使用它。
bdobdo ( bidirectional override ，双向重载):用于显式地格式化其">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"right","display":"post"},
    fancybox: true,
    motion: false,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://codingme.xyz/2016/08/29/html-css-diary-2/"/>





  <title> 《 HTML5 与 CSS3 基础教程》备忘2 | CodingMe </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-right page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">CodingMe</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://codingme.xyz/2016/08/29/html-css-diary-2/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="Huang SJ">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/uploads/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="CodingMe">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="CodingMe" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                《 HTML5 与 CSS3 基础教程》备忘2
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            

            

            
          </span>

          

          
            
          

          

          
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="html-的其他属性"><a href="#html-的其他属性" class="headerlink" title="html 的其他属性"></a>html 的其他属性</h1><p>除非在 html 元素中添加 dir 属性并将属性值设为 rtl ，否则内容的基准方向都默认为从左至右。</p>
<h1 id="span-和-div"><a href="#span-和-div" class="headerlink" title="span 和 div"></a>span 和 div</h1><p>span 只适合<strong>包围字词或短语内容</strong>，而 div 适合<strong>包含块级内容</strong>。由于 span 没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时才使用它。</p>
<h1 id="bdo"><a href="#bdo" class="headerlink" title="bdo"></a>bdo</h1><p>bdo ( bidirectional override ，双向重载):用于显式地格式化其内容的文本方向。<br>要使用 bdo ，必须包含 dir 属性并将属性值设为 ltr (由左至右)或 rtl (由右至左)，指定你希望呈现的方向。(如果你的 HTML 页面中混合了从左至右书写的字符和从右至左书写的字符，就可能要用到 bdi 和 bdo 元素。)例子： <code>&lt;plang=&quot;he&quot;&gt;&lt;bdo dir=&quot;rtl&quot;&gt;...&lt;/bdo&gt;&lt;/p&gt;</code></p>
<h1 id="bdi-元素"><a href="#bdi-元素" class="headerlink" title="bdi 元素"></a>bdi 元素</h1><p>bdi 指的是 bidi 隔离(Bi-directional Isolation)，用于标识独立于周围文本的用做双向文本格式化的一块文本。<br>bdi 元素是 HTML5 中新加的元素，用于内容的方向未知的情况。不必包含 dir 属性，因为默认已设为自动判断。例子：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>User <span class="tag">&lt;<span class="name">bdi</span>&gt;</span>jcranmer<span class="tag">&lt;/<span class="name">bdi</span>&gt;</span>:</div><div class="line">    12 posts.<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>User <span class="tag">&lt;<span class="name">bdi</span>&gt;</span>hober<span class="tag">&lt;/<span class="name">bdi</span>&gt;</span>:</div><div class="line">    5 posts.<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>User <span class="tag">&lt;<span class="name">bdi</span>&gt;</span>نا إي<span class="tag">&lt;/<span class="name">bdi</span>&gt;</span>:</div><div class="line">    3 posts.<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure>
<a id="more"></a>
<h1 id="meter-元素"><a href="#meter-元素" class="headerlink" title="meter 元素"></a>meter 元素</h1><p>可以用 meter 元素表示<strong>分数的值或已知范围的测量结果</strong>。简单地说，它代表的是<strong>投票结果</strong>。 HTML5 建议(并非强制)浏览器在呈现 meter 时，在旁边显示一个类似温度计的图形——一个表示测量值的横条，测量值的颜色与最大值的颜色有所区别(相等除外)。作为当前少数几个支持 meter 的浏览器， Firefox 正是这样显示的。对于不支持 meter 的浏览器，可以通过 CSS 对 meter 添加一些额外的样式，或用 JavaScript 进行改进。</p>
<ul>
<li><p>meter 元素代码示例：</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Project completion status:</div><div class="line">    <span class="tag">&lt;<span class="name">meter</span> <span class="attr">value</span>=<span class="string">"0.80"</span>&gt;</span>80% completed<span class="tag">&lt;/<span class="name">meter</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Car brake pad wear:</div><div class="line">    <span class="tag">&lt;<span class="name">meter</span> <span class="attr">low</span>=<span class="string">"0.25"</span> <span class="attr">high</span>=<span class="string">"0.75"</span> <span class="attr">optimum</span>=<span class="string">"0"</span> <span class="attr">value</span>=<span class="string">"0.21"</span>&gt;</span>21% worn<span class="tag">&lt;/<span class="name">meter</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Miles walked during half-marathon:</div><div class="line">    <span class="tag">&lt;<span class="name">meter</span> <span class="attr">min</span>=<span class="string">"0"</span> <span class="attr">max</span>=<span class="string">"13.1"</span> <span class="attr">value</span>=<span class="string">"5.5"</span> <span class="attr">title</span>=<span class="string">"Miles"</span>&gt;</span>4.5<span class="tag">&lt;/<span class="name">meter</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>已经有人试过针对支持 meter 的浏览器和不支持的浏览器统一编写 meter 的 CSS 。在网上搜索“ style HTML5 meter with CSS ”(用 CSS 为 HTML5 的 meter 添加样式)，就可以找到一些解决方案(注意其中的一些用到了 JavaScript )。 meter 并不用于标记没有范围的普通测量值，如高度、宽度、距离、周长等。</p>
</li>
<li>一定不要将 meter 和 progress 元素混在一起使用。</li>
</ul>
<h1 id="progress-元素"><a href="#progress-元素" class="headerlink" title="progress 元素"></a>progress 元素</h1><p>progress 元素也是 HTML5 的新元素。前面说过，它指示<strong>某项任务的完成进度</strong>。它和 meter 元素一样，支持的会显示一个进度条，不支持的会显示文本。</p>
<ul>
<li>progress 代码示例：  <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Current progress: </div><div class="line">    <span class="tag">&lt;<span class="name">progress</span> <span class="attr">max</span>=<span class="string">"100"</span> <span class="attr">value</span>=<span class="string">"0"</span>&gt;</span>0% saved<span class="tag">&lt;/<span class="name">progress</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="rel-属性"><a href="#rel-属性" class="headerlink" title="rel 属性"></a>rel 属性</h1><ul>
<li><p>rel 属性是可选的，即便没有它，链接也能照常工作。但对于指向另一网站的链接，推荐包含这个值。它描述包含链接的页面和链接指向的页面之间的关系。它也是另一种提升 HTML 语义化程度的方式。搜索引擎也会利用这些信息。此外，还可以对带有 <code>rel=&quot;external&quot;</code> 的链接添加不同的样式，从而告知访问者这是一个指向外部网站的链接。对任何链接到站外页面的 a 元素(即外部链接)添加 <code>rel=&quot;external&quot;</code> 是非常好的习惯。</p>
</li>
<li><p>不管怎样，应避免使用“点击此处”作为标签。例如，应使用“了解我们的销售情况”，而不是“点击此处了解我们的销售情况”。</p>
</li>
<li><p>维 基 百 科 上 有 一 份 rel 值 的 列 表：<a href="http://microformats.org/wiki/existing-rel-values/" target="_blank" rel="external">http://microformats.org/wiki/existing-rel-values/</a>，该列表还在持续更新中。</p>
</li>
</ul>
<h1 id="target-属性"><a href="#target-属性" class="headerlink" title="target 属性"></a>target 属性</h1><p>target 属性不要在大多数情况下使用。首先，应该让用户决定是否在不同的窗口或标签页打开链接，而不是让 HTML 开发人员决定。</p>
<h1 id="CSS-层叠规则"><a href="#CSS-层叠规则" class="headerlink" title="CSS 层叠规则"></a>CSS 层叠规则</h1><p>CSS 用层叠的原则来考虑<strong>特殊性</strong>(specificity)、<strong>顺序</strong>(order)和<strong>重要性</strong>(importance)，从而判断相互冲突的规则中哪个规则应该起作用。</p>
<h1 id="CSS3-新增颜色属性"><a href="#CSS3-新增颜色属性" class="headerlink" title="CSS3 新增颜色属性"></a>CSS3 新增颜色属性</h1><p>CSS3 中新增的颜色属性 HSL 相比 RGB 的优点是：<br>举例，从红变绿的话， HSL 更加的可预计，而且不需要更改原本的亮度。<br>HSL:<strong>色相</strong>(hue)/<strong>饱和度</strong>(saturation)/<strong>亮度</strong>(lightness)<br>例子:<br>红色为 hsl(0,100%,50%);<br>黄色为 hsl(60,100%,50%);<br>绿色为 hsl(120,100%,50%);<br>青色为 hsl(180,100%,50%);</p>
<h1 id="外部样式表与-import"><a href="#外部样式表与-import" class="headerlink" title="外部样式表与 @import"></a>外部样式表与 @import</h1><p>外部样式表要么是通过链接引用的，要么是导入的(通过 <code>@import</code> )，不过不推荐导入。 @import 指令会影响页面的下载速度和呈现速度，在 Internet Explorer 中影响更为明显。 Web 性能专家 Steve Souders 对此问题进行了讨论，参见<a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/" target="_blank" rel="external">http://www.stevesouders.com/blog/2009/04/09/dont-use-import/</a> 。建议不要使用 <code>@import</code> ，这主要是出于性能上的考虑。如果用了 <code>@import</code> ，当引入的样式后面有与之冲突的样式，则后出现的样式会覆盖这些引入的样式，与预期一致。</p>
<ul>
<li>外部样式表的另一个好处是，一旦浏览器在某个页面加载了它，在随后浏览引用它的页面时，通常无需再向 Web 服务器请求该文件。浏览器会将它保存到缓存里，也就是保存到用户的计算机里，并使用这个版本的文件。这样做可以加快对页面的加载。不过，不必担心。如果随后对样式表作了修改，再将它传到 Web 服务器，浏览器就会下载更新后的文件，而不是使用缓存的文件。</li>
</ul>
<h1 id="link-、-style-元素的开始标签"><a href="#link-、-style-元素的开始标签" class="headerlink" title="link 、 style 元素的开始标签"></a>link 、 style 元素的开始标签</h1><ul>
<li>HTML 早期版本要求在 link 元素定义中包含 <code>type=&quot;text/css&quot;</code> ，但 HTML5 不要求这样做。</li>
<li>HTML5 之前的版本要求在 style 开始标签中包含属性 <code>type=&quot;text/css&quot;</code> ，不过 HTML5 没有要求。</li>
<li>在 link 或 style 元素的开始标签中添加 <code>media=&quot;output&quot;</code>，其中 output 可以是 print 、 screen 或 all (尽管还有其他一些选项，但这些是最常见的) 也可以在样式表中使用<code>@media</code>规则。这种方法不需要在 link 元素中指定媒体类型。</li>
<li>通过对 link 元素添加 media 属性，可以将样式表限于特定输出。使用浏览器查看页面时， style.css 会起作用(由于使用了 <code>media=&quot;screen&quot;</code>)；打印页面时， print.css 会起作用(由于使用了 <code>media=&quot;print&quot;</code> )。</li>
</ul>
<h1 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h1><p>可以在选择器中使用<strong>方括号</strong>添加关于目标元素的属性或值的信息：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">a</span><span class="selector-attr">[title]</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-tag">a</span><span class="selector-attr">[href="http://www.wikipedia.org"]</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ul>
<li>尽量不要使用<strong> ID 选择器</strong>。</li>
<li>除非必须特别针对目标元素，最好不要在 id 或 class 选择器中添加元素名称。(像是<code>h1.news { color: red; }</code> )</li>
<li>如果有样式冲突， .architect.bio 的规则的优先级比.architect 或.bio 的更高。</li>
<li>id 选择器会引入下面两个问题:<ul>
<li>与它们关联的样式不能在其他元素上复用</li>
<li>它们的特殊性比 class 选择器要强得多。这意味着如果要覆盖使用 id 选择器定义的样式，就要编写特殊性更强的 CSS 规则。</li>
</ul>
</li>
<li><p>.architect 和 p 之间的空格表示这个选择器会寻找任何作为 architect 类元素后代(无论是第几代)的 p 元素。</p>
  <figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.architect</span> <span class="selector-tag">p</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div><div class="line"><span class="comment">/*得到相同效果的其他方式</span></div><div class="line">-------------------------------------- */</div><div class="line"><span class="comment">/* 是任意 article 祖先的所有 p 元素，</span></div><div class="line">这是三个中特殊性最低的一个 */</div><div class="line"><span class="selector-tag">article</span> <span class="selector-tag">p</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 属于 architect 类 article 元素的祖先的任意 p 元</span></div><div class="line">素，是三个中特殊性最高的一个 */</div><div class="line"><span class="selector-tag">article</span><span class="selector-class">.architect</span> <span class="selector-tag">p</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>这个选择器仅选择 architect 类元素的子元素(而非子子元素、子子子元素等)的 p 元素。包含于任何其他元素的 p 元素均不会被选中</p>
  <figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.architect</span> &gt; <span class="selector-tag">p</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>通常最好保持较低的特殊性，让样式更易于复用。</p>
</li>
</ul>
<h1 id="，-CSS-相邻同胞结合符"><a href="#，-CSS-相邻同胞结合符" class="headerlink" title="+， CSS 相邻同胞结合符"></a>+， CSS 相邻同胞结合符</h1><p>CSS 相邻同胞结合符(adjacent sibling combinator):只有直接跟在同胞 p 元素后面的 p 元素显示为红色。如果后面还有第三个、第四个以及更多的段落，它们也将显示为红色。例如，如果要对<strong>除第一个段落以外的所有段落进行缩进</strong>，相邻同胞结合符就很有用。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">architect</span> <span class="selector-tag">p</span>+<span class="selector-tag">p</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h1 id="，普通同胞结合符"><a href="#，普通同胞结合符" class="headerlink" title="~，普通同胞结合符"></a>~，普通同胞结合符</h1><p>我们也可能会用到普通同胞结合符，通过它可以选择那些并非直接出现在另一同胞元素后面的同胞元素。它与相邻同胞结合符的唯一区别是使用～(波浪号)代替 + 分隔同胞元素。例如， <code>h1 ～ h2 { color: red; }</code>会让<strong>任何属于同一父元素的同胞 h1 后面的 h2元素显示为红色(它们可以直接相邻，也可以不直接相邻)</strong>。</p>
<h1 id="伪类与伪元素"><a href="#伪类与伪元素" class="headerlink" title="伪类与伪元素"></a>伪类与伪元素</h1><p>选择第一个或最后一个子元素用 <code>:first-child</code> 和 <code>:last-child</code> 伪类。这些伪类选择的是作为第一个子元素或最后一个子元素的元素(在这个例子中就是 li )。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:last-child</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ul>
<li>仅仅使用 <code>:first-child { color: red; }</code> ，可以为任何作为另一个元素的第一个子元素的元素应用样式。</li>
<li>我们可以分别使用 <code>:first-letter</code> 和 <code>:first-line</code> 伪元素只选择元素的第一个字母或第一行。</li>
<li>第一个字母前面的标点符号(如引号)会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性，但 IE8 之前的版本并不是这样做的，它将标点符号本身当做第一个字母。</li>
<li>在 CSS3 中， <code>:first-line</code> 的语法为 <code>::first-line</code> ， <code>:first-letter</code> 的语法为 <code>::first-letter</code> 。注意，它们用两个冒号代替了单个冒号。这样修改的目的是将<strong>伪元素</strong>(有四个，包 括 <code>::first-line</code> 、 <code>::first-letter</code> 、 <code>::before</code> 和 <code>::after</code> ) 与 <strong>伪类</strong>( 如 <code>:first-child</code> 、<code>:link</code> 、 <code>:hover</code> 等)区分开。</li>
<li><strong>伪元素</strong>(pseudo-element)是 HTML 中并不存在的元素。例如，定义第一个字母或第一行文字时，并未在 HTML 中作相应的标记。它们是另一个元素(在本例中为 p 元素)的部分内容。</li>
<li><strong>伪类</strong>(pseudo-class)应用于一组 HTML 元素，而你无需在 HTML 代码中用类标记它们。例如，使用 <code>:first-child</code> 可以选择某元素的第一个子元素，你就不用写成<code>class=&quot;first-child&quot;</code></li>
<li>未来， <code>::first-line</code> 和 <code>::first-letter</code> 这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。不过， IE9 之前的 Internet Explorer 版本均不支持双冒号。因此，你可以选择继续使用单冒号语法，除非你为 IE8 及以下版本设置了单独的 CSS 。</li>
<li>按状态选择链接元素<ul>
<li>输入 link 以设置从未被激活或指向，当前也没有被激活或指向的链接的外观</li>
<li>输入 visited 以设置访问者已激活过的链接的外观</li>
<li>输入 focus ，前提是链接是通过键盘选择并已准备好激活的(例如通过 Tab 键)</li>
<li>输入 hover 以设置光标指向链接时链接的外观</li>
<li>输入 active 以设置激活过的链接的外观(更准确应该是激活时，点击是 active ,松开后是 visited )</li>
<li>要对链接指定样式，不一定要指定伪类，例如，使用 <code>a{color: red;}</code>会让链接的所有状态显示为同一种样式。不过，最好使用伪类区分不同状态的样式，这样做可以方便访问者。<ul>
<li>由于链接可能同时处于多种状态，且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则： <strong>link</strong> 、 <strong>visited</strong> 、<strong>focus</strong> 、 <strong>hover</strong> 、 <strong>active</strong> ( 缩 写 为 LVFHA)。一种助记口诀为“ Lord Vader’s Former Handle Anakin ”(达斯·维达的原名叫安纳金)</li>
<li>触屏设备(如智能手机和平板电脑)的浏览器没有桌面浏览器所具有的“鼠标悬停”(即 hover)状态。不过，在 iPhone 和 iPad 上，访问者激活链接时，确实会显示通过 :hover 指定的样式。其他设备的行为则不一而定。</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h1><ul>
<li><p>按属性选择元素</p>
<ul>
<li>方括号包围目标属性和目标属性值。这个例子中没有属性值，它选择的是所有具有 class 属性的段落<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">p</span><span class="selector-attr">[class]</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p><strong>属性选择器</strong>参考表</p>
<ul>
<li>[attribute] 匹配指定属性，不论具体值是什么</li>
<li>[attribute=”value”] 完全匹配指定属性值</li>
<li>[attribute~=”value”] 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值</li>
<li>[attribute|=”value”] 属性值以 value- 打头或匹配 value</li>
<li>[attribute^=”value”] 属性值以 value 开头， value 为完整的单词或单词的一部分</li>
<li>[attribute$=”value”] 属性值以 value 结尾， value 为完整的单词或单词的一部分</li>
<li>[attribute*=”value”] 属性值为指定值的子字符串,属性值至少包含这里的 value 一次的元素将被选中。<ul>
<li>当前所有主流浏览器均支持按元素包含的属性(和属性值)选择元素。对于 CSS3 中新增的属性选择器， IE7 和 IE8 有一些异常。</li>
</ul>
</li>
</ul>
</li>
<li><p>指定元素组</p>
<ul>
<li>不同的选择器不一定非得单独成行，但很多编码人员都遵循这种惯例，易于阅读！<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">h1</span>,</div><div class="line"><span class="selector-tag">h2</span> &#123;</div><div class="line"><span class="attribute">color</span>: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>在这里有个疑问，尝试自问自答。<br>  问：用元素组选择器跟用同个 class 效果是差不多的，比如上面的 h1 , h2 ,可以都拥有相同 class 属性。那么怎么判断该用哪个呢？<br>  一句话总结：<strong>爱用哪个用哪个</strong>。<br>  与其考虑用哪个选择器的话，不如想想维护性，这点更重要。<br>  (选择器影响效率也是微乎其微..在选择器上优化得到的性能提升还没有合并一个 http 请求来得实在。)<br>  关于选择器效率有一点：选择器的匹配机制是从选择器的右边到左边进行读取的。<br>  选择器效率从高到低的排序列表:<br>  id 选择器(#id)<br>  类选择器(.className)<br>  标签选择器(div,h1,p)<br>  相邻选择器(h1+p)<br>  子选择器(ul &gt; li)<br>  后代选择器(li a)<br>  通配符选择器(*)<br>  属性选择器(a[rel=”external”])<br>  伪类选择器(a:hover,li:nth-child)</p>
</li>
</ul>
<h1 id="IE6-伪类和选择器兼容"><a href="#IE6-伪类和选择器兼容" class="headerlink" title="IE6 伪类和选择器兼容"></a>IE6 伪类和选择器兼容</h1><p>Selectivizr(<a href="http://selectivizr.com/" target="_blank" rel="external">http://selectivizr.com/</a> )：这是“一个在 Internet Explorer 6 ～ 8 中模拟 CSS3 伪类和属性选择器的 JavaScript 工具”</p>
<h1 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h1><ul>
<li>sans-serif 、 cursive 、 fantasy 、 monospace 分别表示无衬线字体、手写字体、装饰字体和等宽字体。</li>
<li><a href="https://css-tricks.com/why-ems/" target="_blank" rel="external">https://css-tricks.com/why-ems/</a></li>
</ul>
<h1 id="文本大小写"><a href="#文本大小写" class="headerlink" title="文本大小写"></a>文本大小写</h1><ul>
<li>既然可以改变 HTML 里的文本，为什么还要用 text-transform 这类的 CSS 属性来修改文本显示呢？这是因为，有时，内容是你无法控制的。例如，内容可能存储在数据库里，或者来自另一个网站的新闻源。在这些情况下，只能通过 CSS 控制文本的大小写。搜索引擎通常是按它在 HTML 里输入的样子索引文本的，在搜索结果里显示标准的大小写会更容易阅读。</li>
<li>使用小型大写字母的方法:输入 <code>font-variant: small-caps</code>。与简单地缩小字号的大写字母相比，小型大写字母显得更为轻巧。</li>
<li><code>white-space: pre;</code> 输入 pre ，以让浏览器显示原文本中所有的空格和回车。或者输入 owrap ，确保所有空格不断行，也就是文本全部显示在一行；或者输入 normal ，按正常方式处理空格。</li>
</ul>
<h1 id="CSS-重置"><a href="#CSS-重置" class="headerlink" title="CSS 重置"></a>CSS 重置</h1><p>使用 CSS Reset 和 normalize.css 的原因：每个浏览器都有内置的默认样式表。 HTML 会遵照该样式表显示，除非你自己编写的 CSS 覆盖了它们。整体上，不同浏览器提供的默认样式表是相似的，但也存在一定的差异。为此，开发人员在应用他们自己的 CSS 之前，常常需要抹平这些差异。</p>
<h1 id="ul-与-inline-block"><a href="#ul-与-inline-block" class="headerlink" title="ul 与 inline-block"></a>ul 与 inline-block</h1><p>关于 inline-block 和 ul ：让 ul 水平排列，如果对 li 用 inline-block 的话貌似会让 list-style-* 出现问题。</p>
<h1 id="兼容性-CSS-前缀"><a href="#兼容性-CSS-前缀" class="headerlink" title="兼容性 CSS 前缀"></a>兼容性 CSS 前缀</h1><p>带有-webkit- 和 -moz- 这些奇怪前缀的属性可以让这些规则在旧的 Android 和 iOS 设备上起作用，同时在 Firefox 上也能正常工作。</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Web/" rel="tag"># Web</a>
          
            <a href="/tags/html/" rel="tag"># html</a>
          
            <a href="/tags/css/" rel="tag"># css</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/08/07/html-css-diary/" rel="next" title="《 HTML5与 CSS3 基础教程》备忘">
                <i class="fa fa-chevron-left"></i> 《 HTML5与 CSS3 基础教程》备忘
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2016/08/29/html-css-diary-3/" rel="prev" title="《 HTML5 与 CSS3 基础教程》备忘3">
                《 HTML5 与 CSS3 基础教程》备忘3 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.jpg"
               alt="Huang SJ" />
          <p class="site-author-name" itemprop="name">Huang SJ</p>
          <p class="site-description motion-element" itemprop="description"></p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">75</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/hsj1992" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/hsj9527" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/u/1694147905" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.freecodecamp.cn/hsj1992" target="_blank" title="FreeCodeCamp">
                  
                    <i class="fa fa-fw fa-fire"></i>
                  
                  FreeCodeCamp
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://codepen.io/hsj1992/" target="_blank" title="codepen">
                  
                    <i class="fa fa-fw fa-codepen"></i>
                  
                  codepen
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://hsj1992.oschina.io/" target="_blank" title="码云镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  码云镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.coding.me/" target="_blank" title="coding镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  coding镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://hsj1992.github.io/" target="_blank" title="github镜像">
                  
                    <i class="fa fa-fw fa-code"></i>
                  
                  github镜像
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://codingme-6dd8a.firebaseapp.com" target="_blank" title="Firebase镜像">
                  
                    <i class="fa fa-fw fa-google"></i>
                  
                  Firebase镜像
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#html-的其他属性"><span class="nav-number">1.</span> <span class="nav-text">html 的其他属性</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#span-和-div"><span class="nav-number">2.</span> <span class="nav-text">span 和 div</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#bdo"><span class="nav-number">3.</span> <span class="nav-text">bdo</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#bdi-元素"><span class="nav-number">4.</span> <span class="nav-text">bdi 元素</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#meter-元素"><span class="nav-number">5.</span> <span class="nav-text">meter 元素</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#progress-元素"><span class="nav-number">6.</span> <span class="nav-text">progress 元素</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#rel-属性"><span class="nav-number">7.</span> <span class="nav-text">rel 属性</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#target-属性"><span class="nav-number">8.</span> <span class="nav-text">target 属性</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-层叠规则"><span class="nav-number">9.</span> <span class="nav-text">CSS 层叠规则</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS3-新增颜色属性"><span class="nav-number">10.</span> <span class="nav-text">CSS3 新增颜色属性</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#外部样式表与-import"><span class="nav-number">11.</span> <span class="nav-text">外部样式表与 @import</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#link-、-style-元素的开始标签"><span class="nav-number">12.</span> <span class="nav-text">link 、 style 元素的开始标签</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#选择器"><span class="nav-number">13.</span> <span class="nav-text">选择器</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#，-CSS-相邻同胞结合符"><span class="nav-number">14.</span> <span class="nav-text">+， CSS 相邻同胞结合符</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#，普通同胞结合符"><span class="nav-number">15.</span> <span class="nav-text">~，普通同胞结合符</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#伪类与伪元素"><span class="nav-number">16.</span> <span class="nav-text">伪类与伪元素</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#属性选择器"><span class="nav-number">17.</span> <span class="nav-text">属性选择器</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#IE6-伪类和选择器兼容"><span class="nav-number">18.</span> <span class="nav-text">IE6 伪类和选择器兼容</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#字体"><span class="nav-number">19.</span> <span class="nav-text">字体</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文本大小写"><span class="nav-number">20.</span> <span class="nav-text">文本大小写</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS-重置"><span class="nav-number">21.</span> <span class="nav-text">CSS 重置</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ul-与-inline-block"><span class="nav-number">22.</span> <span class="nav-text">ul 与 inline-block</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#兼容性-CSS-前缀"><span class="nav-number">23.</span> <span class="nav-text">兼容性 CSS 前缀</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Huang SJ</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/velocity/1.2.1/velocity.ui.min.js"></script>

  
  <script type="text/javascript" src="//cdn.staticfile.org/fancybox/2.1.5/jquery.fancybox.pack.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  



  




	




  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

  


</body>
</html>
